<template>
	<view class="container">
		<!-- 搜索条件 -->
		<uni-forms :modelValue="searchParams">
			<!-- <uni-forms-item label="时间:" name="date" :label-width='73'>
				<picker class="time" mode="date" :value="searchParams.date" fields="month" @change="bindDateChange">
					<view class="picker" :style="{color:searchParams.date?'black':'#999999'}">
						{{ searchParams.date ? searchParams.date : '请选择月份' }}
					</view>
				</picker>
			</uni-forms-item>
			<uni-forms-item label="用户ID:" name="name" :label-width='73'>
				<uni-easyinput type="text" v-model="searchParams.name" placeholder="请输入用户ID" />
			</uni-forms-item> -->
			<uni-forms-item label="用户分类:" name="type" :label-width='73'>
				<uni-data-select v-model="searchParams.type" :localdata="range" @change="changeType"></uni-data-select>
			</uni-forms-item>

		</uni-forms>
		<!-- 按钮 -->
		<view class="button-container">
			<button @click="resetSearch" class="btn">重置</button>
			<button @click="search" type="primary" class="btn" :loading="loading">搜索</button>
		</view>

		<!-- 表格 -->
		<el-table :data="tableData" v-loading="loading" border stripe class="mb40">
			<el-table-column align="center" colspan="3" label="上月">
				<el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop"
					:label="column.label" />
			</el-table-column>
			
		</el-table>

		<el-table :data="tableData2"  v-loading="loading" border stripe >
			<el-table-column align="center" colspan="3" label="历史">
				<el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop"
					:label="column.label" />
			</el-table-column>
			
		</el-table>
	</view>
</template>

<script>
	import SortIcon from '@/components/SortIcon/SortIcon.vue';
	import {
		queryLR
	} from '@/api/agent'
	export default {
		components: {
			SortIcon
		},
		data() {
			return {
				searchParams: {
					// date: '',
					type: undefined,
					// id: ''
				},
				sortBy: 'id', // 默认按 id 排序
				sortOrder: 'asc', // 默认升序
				range: [{
						value: 0,
						text: "直属游戏用户"
					},
					{
						value: 1,
						text: "直属一级代理"
					},
					{
						value: 2,
						text: "二级代理"
					},
				],
				columns: [{
						label: '用户ID',
						field: 'id'
					},
					{
						label: '用户名称',
						field: 'name'
					},
					{
						label: '净利润',
						field: 'difference'
					}

				],
				tableData: [],
				tableData2: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
				loading: false,
			};
		},
		mounted() {
			// 页面初始化时按 id 升序排序
			this.sortTable('id');
			this.getList()
		},
		methods: {

			getList() {
				this.loading=true
				queryLR(this.searchParams).then(res => {
					this.tableData1 = res.data.user
					this.tableData2 = res.data.tallUser
					this.loading=false
				})
			},
			sortTable(column) {
				if (this.sortBy === column) {
					this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
				} else {
					this.sortBy = column;
					this.sortOrder = 'asc';
				}

				this.tableData.sort((a, b) => {
					let valA = a[column];
					let valB = b[column];

					if (typeof valA === 'string') {
						valA = valA.toLowerCase();
						valB = valB.toLowerCase();
					}

					if (this.sortOrder === 'asc') {
						return valA < valB ? -1 : (valA > valB ? 1 : 0);
					} else {
						return valA > valB ? -1 : (valA < valB ? 1 : 0);
					}
				});
			},
			// 时间改变
			bindDateChange(e) {
				this.searchParams.date = e.detail.value;
			},
			// 重置
			resetSearch() {
				this.searchParams = {
					date: '',
					type: undefined,
					id: ''
				};
				this.currentPage = 1;
				this.search();
				this.total = 0;
			},
			search() {
				// this.loading = true;
				// try {
				// 	const response = await this.fetchData();
				// 	this.tableData = response.data;
				// 	this.total = response.total;
				// } catch (error) {
				this.getList()
				// } finally {
				// 	this.loading = false;
				// }
			},
			async fetchData() {
				// 模拟接口调用
				const params = {
					date: this.searchParams.date,
					difference: this.userCategories[this.searchParams.type],
					id: this.searchParams.id,
					page: this.currentPage,
					pageSize: this.pageSize
				};
				// 这里替换为实际的接口调用
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve({
							data: [{
									id: '1',
									name: '张三',
									difference: '普通用户',
									registerTime: '2023-01-01'
								},
								{
									id: '2',
									name: '李四',
									difference: 'VIP用户',
									registerTime: '2023-02-01'
								}
							],
							total: 20
						});
					}, 1000);
				});
			},
			// 分页
			handlePaginationChange(e) {
				this.currentPage = e.current;
				this.search();
			},
			// 用户分类
			changeType(e) {
				this.searchParams.type = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
	}

	.sort-icon {
		cursor: pointer;
		margin-left: 5px;
		display: inline-block;
	}

	.search-container {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}

	.btn {
		height: 65rpx;
		width: 30%;
		font-size: 24rpx;
	}

	.time {
		// flex: 1;
		width: 90%;
	}

	.picker {
		border: 1px solid #e5e5e5;
		border-radius: 5rpx;
		padding: 5px 10px;
		width: 100%;
		font-size: 14px !important;
	}

	.button-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.pagination-container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}

	.pagination-container button {
		margin: 0 10px;
	}

	::v-deep .uni-input-placeholder {
		font-size: 14px !important;
	}

	::v-deep .uni-select__input-placeholder {
		font-size: 14px !important;
	}

	::v-deep .uni-easyinput__content-input {
		height: 30px;
	}
</style>